<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Post from '@/components/post/index.vue'
import { useUserGetMyCommentList } from '@/api/user'
import { usePostStore } from '@/stores/modules/post'

// 定义当前选中的菜单项目
const activeMenu = ref('response')
const postStore = usePostStore()
// 处理菜单选择事件
const handleSelect = (key: string) => {
  activeMenu.value = key
}

const comments = ref()
// 初始化为空数组
const renderList = ref<
  {
    post: any
    content: string
    createTime: string
  }[]
>([])

useUserGetMyCommentList().then((res) => {
  comments.value = res.data.data

  for (const item of comments.value) {
    if (!postStore.getPostById(item.postId)) {
      continue
    }
    renderList.value.push({
      post: postStore.getPostById(item.postId),
      content: item.content,
      createTime: item.createTime,
    })
  }
  console.log(renderList.value)
})
</script>

<template>
  <div class="flex">
    <div class="left">
      <!-- 使用 el-menu 创建菜单 -->
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="response"
          >我的回复</el-menu-item
        >
      </el-menu>
    </div>
    <div class="right" v-if="renderList.length">
      <template
        v-for="(post, index) in renderList"
        :key="index"
      >
        <Post
          :post-data="{
            cover: post.post.post.pictureBase64,
            username: post.post.userName,
            title: post.post.post.title,
            desc: '你的评论内容' + post.content,
            publishTime: post.createTime,
            commentCount: 0,
            id: post.post.post.id,
            userId: post.post.post.userId,
          }"
          :permission="{
            read: 0,
            comment: post.post.commentPermission,
          }"
        />
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left {
  position: fixed; /* 固定定位 */
  top: 40%; /* 距离顶部 0 像素 */
  /* 距离左侧 0 像素 */
  z-index: 1000; /* 设置 z-index，确保菜单显示在其他内容上方 */
}

.right {
  margin-left: 100px; /* 为内容区域留出菜单的宽度 */
  flex: 1;
}
</style>
